<template>
	<view class="safe-padding topbar-content" :style="barStyle">
		<!-- 如果需要自定义left插槽内容需要将showBack置为false -->
		<view class="left" @click="onclickLeft">
			<slot name="left">
				<u-icon v-if="showBack" name="arrow-left" size="20"></u-icon>
			</slot>
		</view>
		<view class="center" :style="centerStyle"><slot></slot></view>
		<!-- 没有right插槽是因为小程序已经自带有一个按钮在右边 -->
	</view>
</template>

<script>
	export default {
		name:"ycy-top-bar",
		props: {
			bgColor: { type: String, default: '#9dae8a' },
			height: { type: Number, default: 78 },
			center: { type: Boolean, default: true },
			showBack: { type: Boolean, default: true },
		},
		computed: {
			barStyle() {
				return `height: ${this.height}rpx;background-color: ${this.bgColor};`;
			},
			centerStyle() {
				return `${this.center ? 'left: 50%;transform: translateX(-50%);': ''}`;
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			onclickLeft() {
				if(this.showBack) uni.navigateBack();
				else this.$emit('onclickLeft');
			}
		}
	}
</script>

<style lang="scss">
.topbar-content {
	display: flex;
	padding-right: 196rpx;
	position: relative;
}
.center {
	position: absolute;
	top: 60%;
}
.left {
	i {
		// font-size: 48rpx;
		padding-left: 16rpx;
	}
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>